<template>
    <!-- pages/mypreferentialcard/index.wxml -->
    <view class="page">
        <view class="commontbox">
            <view class="box1 mt-20" v-for="(item, index) in CouponList" :key="index">
                <view class="shopcoupon">现金券</view>

                <view class="flexbox-sb">
                    <view class="centers h-140">
                        <view class="menoy mr-30">
                            <text class="c-text5 mr-10">¥</text>
                            <text class="c-text6">{{ item.deduction }}</text>
                        </view>
                        <view class="flexbox">
                            <view class="c-text1">现金抵用券</view>
                            <!-- <view class="c-text1">{{item.content}}</view> -->
                            <view class="c-text2">有效期内可用</view>
                            <view class="c-text2">暂只支持分享</view>
                        </view>
                        <view class="text c-text3 centers" v-if="item.totalNum != 0">{{ item.totalNum }}张</view>
                    </view>
                    <view>
                        <!-- <image class="stutasimg" src="{{imgUrl + 'h-share.png'}}"></image>
              <image  src="{{imgUrl + 'h-use.png'}}" class="stutasimg"></image> -->
                    </view>
                </view>

                <view class="flexbox-sb mt-20">
                    <view class="c-text4">有效期至：永久有效</view>
                    <!-- <view class="c-btn1" catchtap="toHome">立即使用</view> -->
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/mypreferentialcard/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            active: 0,
            type: 1,

            // 只有现金券
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            couponlist: [],

            pageNo: '',
            CouponList: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getUserCouponS();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        // 解决setData后页面数据不更新解决
        // wx.reLaunch({
        //   url: '/firstpages/my/index',
        // })
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            pageNo: this.pageNo + 1
        });
        this.getUserCoupon();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // tabs切换
        onChange(event) {
            // 优惠券类型 0 套餐券 1 满减 2 折扣 3 抵扣券 4 现金券
            if (event.detail.index == 0) {
                this.setData({
                    type: 0
                });
                this.getUserCoupon(this.type);
            } else if (event.detail.index == 1) {
                this.setData({
                    type: 4
                });
                this.getUserCoupon(this.type);
            } else if (event.detail.index == 2) {
                this.setData({
                    type: 2
                });
                this.getUserCoupon(this.type);
            } else if (event.detail.index == 3) {
                this.setData({
                    type: 1
                });
                this.getUserCoupon(this.type);
            }
        },

        // 跳转理发师详情
        toHair(e) {
            const { item } = e.currentTarget.dataset;
            let obj;

            if (item.stylistId && item.stylistId != 0) {
                _request
                    .postObj('/stylistCard/card', {
                        stylistId: item.stylistId,
                        userId: uni.getStorageSync('userid')
                    })
                    .then((res) => {
                        obj = { ...res.data.data, meal: item };
                        let newobj = JSON.stringify(obj);
                        uni.navigateTo({
                            url: '/pages/hairstylistdetails/index?hair=' + encodeURIComponent(newobj)
                        });
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            } else {
                this.toHome();
            }
        },

        // 跳转套餐详情
        onMeal(e) {
            const { item } = e.currentTarget.dataset;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/mealdetails/index?data=' + encodeURIComponent(obj)
            });
        },

        // 回到首页
        toHome() {
            uni.switchTab({
                url: '/firstpages/home/index'
            });
        },

        // 获取现金券
        getUserCouponS() {
            _request
                .get('/storeCoupon/getStylistCashCouponSummary', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            CouponList: res.data.data
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/mypreferentialcard/index.wxss */

.commontbox {
    padding: 0 20rpx;
}

/* 套餐券 */
.box {
    width: 710rpx;
    height: 268rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    position: relative;
    padding: 40rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;
}

.box1 {
    width: 710rpx;
    height: 254rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    position: relative;
    padding: 40rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;
}

.shopcoupon {
    width: 88rpx;
    height: 28rpx;
    background: #ffe2c9;
    border-radius: 5px 0px 5px 0px;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 28rpx;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

.oty {
    opacity: 0.59;
}

.headimg {
    width: 140rpx;
    height: 140rpx;
}

.stutasimg {
    width: 120rpx;
    height: 120rpx;
}

.stutasimgbox {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
}

.flexbox {
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    height: 100%;
}

.c-text1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.c-text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    width: -webkit-fill-available;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.c-text3 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 34rpx;
    position: absolute;
    top: 20rpx;
    right: 20rpx;
}

.c-text4 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.c-btn1 {
    width: 140rpx;
    height: 48rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(223, 223, 223, 0.26);
    border-radius: 24rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    line-height: 48rpx;
}

/* 现金券 */
.h-140 {
    height: 130rpx;
}
.menoy {
    margin-right: 28rpx;
    padding-right: 22rpx;
    border-right: 2rpx dashed #ff8722;
    height: 100rpx;
}

.c-text5 {
    font-size: 44rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}

.c-text6 {
    font-size: 72rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}
/* 折扣券 */
/* 满减券 */

/* vant组件样式 */
.van-tab--active {
    font-size: 32rpx !important;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
}

.van-tabs__line {
    background: #ff8722 !important;
}

.van-tabs__nav,
.custom-class,
.van-tabs__scroll--line {
    background: #fbfbfb !important;
}
</style>
